<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>联系方式 - 我的个人博客</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>
        <div class="container">
            <h1>我的博客</h1>
            <nav>
                <ul>
                    <li><a href="index.html">首页</a></li>
                    <li><a href="blog.html">文章</a></li>
                    <li><a href="about.html">关于我</a></li>
                    <li><a href="contact.html" class="active">联系方式</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <main class="container contact-page">
        <h2 class="page-title">联系我</h2>
        
        <div class="contact-container">
            <section class="contact-info">
                <h3>联系信息</h3>
                <ul class="contact-list">
                    <li>
                        <span class="contact-icon">✉️</span>
                        <span class="contact-text">邮箱：example@example.com</span>
                    </li>
                    <li>
                        <span class="contact-icon">🔗</span>
                        <span class="contact-text">微信：your_wechat_id</span>
                    </li>
                    <li>
                        <span class="contact-icon">📱</span>
                        <span class="contact-text">QQ：123456789</span>
                    </li>
                    <li>
                        <span class="contact-icon">🏢</span>
                        <span class="contact-text">地址：中国某省某市某区</span>
                    </li>
                </ul>

                <div class="social-links-large">
                    <a href="#" class="social-link">
                        <span class="social-icon">微博</span>
                    </a>
                    <a href="#" class="social-link">
                        <span class="social-icon">知乎</span>
                    </a>
                    <a href="#" class="social-link">
                        <span class="social-icon">GitHub</span>
                    </a>
                </div>
            </section>

            <section class="contact-form">
                <h3>给我留言</h3>
                <form id="contactForm">
                    <div class="form-group">
                        <label for="name">姓名</label>
                        <input type="text" id="name" name="name" required>
                    </div>
                    <div class="form-group">
                        <label for="email">邮箱</label>
                        <input type="email" id="email" name="email" required>
                    </div>
                    <div class="form-group">
                        <label for="subject">主题</label>
                        <input type="text" id="subject" name="subject" required>
                    </div>
                    <div class="form-group">
                        <label for="message">留言内容</label>
                        <textarea id="message" name="message" rows="5" required></textarea>
                    </div>
                    <button type="submit" class="btn btn-primary">发送留言</button>
                </form>
            </section>
        </div>
    </main>

    <footer>
        <div class="container">
            <p>&copy; 2023 我的个人博客. 保留所有权利.</p>
            <div class="social-links">
                <a href="#" class="social-link">微博</a>
                <a href="#" class="social-link">知乎</a>
                <a href="#" class="social-link">GitHub</a>
            </div>
        </div>
    </footer>

    <script src="js/script.js"></script>
</body>
</html> 